import React, { Component } from 'react'
import { NavBar,Icon,Carousel, Toast } from "antd-mobile"
import myaxios from "../../utils/myaxios"
import "./GoodDetail.scss"
export default class GoodDetail extends Component {
    state = {
        imgHeight:250,
        goodInfo:{},
        showCollect:false,
        showSwiper:false
    }
    // constructor(props){
    //     super(props)
    //     console.log(props);
    // }
    componentDidMount(){
        let { goods_id } = this.props.match.params;
        myaxios.get("goods/detail",{
            params:{
                goods_id
            }
        }).then(res=>{
            console.log(res);
            this.setState({
                goodInfo:res,
                showSwiper:true,
            })
        })
        .catch((err)=>console.log(err));
        // 初次进入商品详情的时候  判断商品是否被收藏
        // 初次进入商品详情的时候  判断商品是否被收藏
        let collections_str = localStorage.getItem("collections");
        let collections = JSON.parse(collections_str||"[]");
        // 对收藏进行循环遍历
        // 判断是否在收藏中
        let index = collections.findIndex(v=>{
            if(v.goods_id == goods_id){
                return true;
            }
        })
        if(index!=-1){
            this.setState({
                showCollect:true
            })
        }
    }
    /* 收藏的功能 */
    handleCollect = (params) => {
    // collections 代表的是收藏的数据 数组

    let collections_str = localStorage.getItem("collections");
    let collections = JSON.parse(collections_str||"[]");
    // 对收藏进行循环遍历
    // 判断是否在收藏中
    let index = collections.findIndex(v=>{
        if(v.goods_id === this.state.goodInfo.goods_id){
            return true;
        }
    })
    if(index!=-1){
        // 代表之前收藏过
        collections.splice(index,1);
        Toast.info("取消收藏成功",1);
        this.setState({
            showCollect:false
        })
    }else{
        Toast.info("收藏成功！",1);
        collections.push(this.state.goodInfo);
        this.setState({
            showCollect:true
        })
    }
    localStorage.setItem("collections",JSON.stringify(collections));
    
    }
    render() {
        return (
            <div className="yg-detail">
            <NavBar
                className="yg-detail-nav"
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={() => window.history.go(-1)}
            >
                商品详情
            </NavBar>
            {/* 详情页轮播图开始 */}
            <div className="yg-detail-swiper">
                {this.state.showSwiper && (
            <Carousel infinite autoplay={true}>
            {this.state.goodInfo.pics &&
            this.state.goodInfo.pics.map((v) => {
            return (
                <div
                key={v.goods_id}
                className="imageWrapper"
                style={{
                    display: "inline-block",
                    width: "100%",
                    height: this.state.imgHeight,
                }}
                >
                <img
                    src={v.pics_mid}
                    alt=""
                    style={{ width: "100%", verticalAlign: "top" }}
                    onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                    }}
                />
                </div>
            );
            })}
        </Carousel>)}
            
            </div>
            {/* 详情页轮播图结束 */}
            {/* 价格和分享区域开始 */}
            <div className="yg-detail-price">
                <div className="price-left">
                    <span className="title1">
                        ￥{this.state.goodInfo.goods_price}
                    </span>
                </div>
                <div className="price-right">
                    <i className="iconfont icon-fenxiang"></i>
                    <i className={this.state.showCollect?"iconfont icon-shoucang active":"iconfont icon-shoucang"} onClick={this.handleCollect}></i>
                </div>
            </div>
            {/* 价格和分享区域结束 */}
            {/* 商品的标题开始 */}
            <div className="ye-detail-title">
                {this.state.goodInfo.goods_name}
            </div>
            {/* 商品的标题结束 */}
            {/* 图文详情开始 */}
            <div className="yg-detail-richText">
                <div className="richText-title">图文详情</div>
                <div className="richText-content" dangerouslySetInnerHTML={{__html:this.state.goodInfo.goods_introduce}}></div>
            </div>
            {/* 图文详情结束 */}
            {/* 底部的工具栏开始 */}
            <div className="yg-detail-bottom">
                <div className="bottom-contact">
                    <i className="iconfont icon-lianxikefu"></i>
                    <div className="title">联系客服</div>
                </div>
                <div className="bottom-cart">
                    <i className="iconfont icon-gouwuche"></i>
                    <div className="title">购物车</div>
                </div>
                <div className="bottom-addToCart">
                    <span className="title1">加入购物车</span>
                </div>
                <div className="bottom-buy">
                    <span className="title2">立即购买</span>
                </div>
            </div>
            {/* 底部的工具栏结束 */}
            </div>
        )
    }
}
